<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心 - 哈学院移动大厅</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- 引入 Font Awesome 图标库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .navbar {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }

        .user-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px 15px;
        }

        .card {
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: none;
            overflow: hidden;
            width: 100%;
            max-width: 800px;
            margin-bottom: 30px;
        }

        .user-info-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
        }

        .user-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            margin-right: 20px;
            box-shadow: 0 4px 15px rgba(106, 17, 203, 0.2);
        }

        .user-details h1 {
            margin: 0;
            font-weight: 700;
        }

        .user-meta {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .meta-item {
            flex: 1;
            min-width: 200px;
            margin-bottom: 15px;
        }

        .meta-label {
            font-weight: 600;
            color: #6c757d;
            margin-bottom: 5px;
        }

        .meta-value {
            font-size: 1.2rem;
            font-weight: 700;
            color: #333;
        }

        .action-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 30px 0;
        }

        .action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 25px;
            margin: 0 10px 15px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            flex: 1;
            min-width: 180px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            border: none;
            color: white;
        }

        .btn-outline-secondary {
            border: 2px solid #6a11cb;
            color: #6a11cb;
            background: transparent;
        }

        .action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .action-btn i {
            margin-right: 10px;
        }

        .consumption-history {
            background: white;
            border-radius: 15px;
            padding: 30px;
        }

        .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .history-header h2 {
            margin: 0;
            font-weight: 700;
        }

        .table {
            margin-bottom: 0;
        }

        .table thead th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #495057;
        }

        .table tbody tr {
            transition: background-color 0.2s;
        }

        .table tbody tr:hover {
            background-color: #f8f9fa;
        }

        .footer {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            padding: 20px 0;
            text-align: center;
            font-size: 0.9rem;
            color: #6c757d;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
        <a class="navbar-brand fw-bold" href="#">
            <i class="fa-solid fa-tower-cell me-2"></i>哈学院移动大厅
        </a>
        <div class="d-flex">
            <a href="main.jsp" class="btn btn-sm btn-outline-primary me-2">
                <i class="fa-solid fa-home me-1"></i>首页
            </a>
            <span class="navbar-text me-3">
                <i class="fa-solid fa-user me-1"></i>${user.name}
            </span>
            <a href="#" class="btn btn-sm btn-outline-secondary">
                <i class="fa-solid fa-right-from-bracket me-1"></i>退出
            </a>
        </div>
    </div>
</nav>

<!-- 用户信息和消费记录 -->
<div class="user-container">
    <div class="card user-info-card">
        <div class="user-header">
            <div class="user-avatar">
                <i class="fa-solid fa-user"></i>
            </div>
            <div class="user-details">
                <h1>欢迎 ${user.name}</h1>
                <p class="text-muted">您好，很高兴为您服务</p>
            </div>
        </div>

        <div class="user-meta">
            <div class="meta-item">
                <div class="meta-label">手机号</div>
                <div class="meta-value">${user.number}</div>
            </div>
            <div class="meta-item">
                <div class="meta-label">账户余额</div>
                <div class="meta-value">¥${user.huafei}</div>
            </div>
            <div class="meta-item">
                <div class="meta-label">当前套餐</div>
                <div class="meta-value">未知套餐(${user.taocan})</div>
            </div>
        </div>

        <div class="action-buttons">
            <a href="#" class="action-btn btn-primary">
                <i class="fa-solid fa-random"></i>随机消费
            </a>
            <a href="#" class="action-btn btn-outline-secondary">
                <i class="fa-solid fa-wallet"></i>账户充值
            </a>
        </div>
    </div>

    <div class="card consumption-history">
        <div class="history-header">
            <h2>最近消费记录</h2>
            <a href="#" class="btn btn-sm btn-primary">
                <i class="fa-solid fa-print me-1"></i>打印详单
            </a>
        </div>

        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th>类型</th>
                <th>数量</th>
                <th>金额(元)</th>
                <th>时间</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <c:if test="${empty consumptions}">
                <tr>
                    <td colspan="5" class="text-center py-5">
                        <i class="fa-solid fa-file-invoice-dollar text-muted" style="font-size: 3rem; display: block; margin-bottom: 15px;"></i>
                        <p class="text-muted">暂无消费记录</p>
                    </td>
                </tr>
            </c:if>
            <c:forEach items="${consumptions}" var="consumption">
                <tr>
                    <td>${consumption.consumption_type}</td>
                    <td>${consumption.quantity}</td>
                    <td>${consumption.amount}</td>
                    <!-- 修改日期格式化方式，添加类型转换 -->
                    <td>
                        <c:set var="dateValue" value="${consumption.consumption_time}" />
                        <fmt:formatDate value="${dateValue}" pattern="yyyy-MM-dd HH:mm:ss" />
                    </td>
                    <td>${consumption.remark}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer mt-auto">
    <div class="container">
        <p class="mb-0">© 2023 哈学院移动业务大厅 | 服务热线：400-123-4567</p>
        <p class="text-muted small mt-2">让沟通更简单，让生活更精彩</p>
    </div>
</footer>

<!-- 引入 Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>